<template>
	<view class="container" :class="'wp-'+platform">
		<view class="status_bar" v-if="platform!='h5'"></view>
		
		<view class="cu-bar search bg-white border-bottom">
			<view class="action text-center" @click="doback">
				<text class="cuIcon-back"></text>
			</view>
			<view class="search-form round" style="margin-right: 50upx; margin-left: 20upx; color: #8799a3; font-size: 32upx; background: #EBEBEB;">
				<text class="cuIcon-search"></text>
				<input type="text" v-model="keyword" :placeholder="data.candidate" confirm-type="search" @confirm="searchSubmit"></input>
			</view>
			<view class="action">
				<view @click="doscan">
					<image class="png scanbtn" mode="aspectFit" src="@/static/images/icon/top_scan.png"></image>
				</view>
			</view>
		</view>
		<view class="flex selector">
			<view class="flex-twice padding" @click="showCates">
				<text class="title text-title">分类筛选</text><text class="padding-left-xs" :class="modalName=='categorys'?'cuIcon-fold':'cuIcon-unfold'"></text>
			</view>
			<view class="flex-sub text-center padding-top">
				<picker @change="pickerOrders" :range="orders.titles" :value="orders.index"><text class="text-grey">{{orders.titles[orders.index]}}</text><text class="cuIcon-unfold padding-left-xs"></text></picker>
			</view>
			<view class="flex-sub padding-top text-center" @click="modalName='showtags'">
				<text class="text-grey">热门标签</text><text class="padding-left-xs" :class="modalName=='showtags'?'cuIcon-fold':'cuIcon-unfold'"></text>
			</view>
		</view>
		
		
		<lessons :lessons="data.lessons"></lessons>
		<view class="gototop bg-yellow text-lg" @click="dogotop" v-if="scrollTop>200">
			<text class="cuIcon-top"></text>
		</view>
		<view class="text-center padding-top-sm bg-white" v-if="loadmore=='more'">
			<view class="loadmore">
				<image src="@/static/images/img_home_showmore.png" class="png"></image>
			</view>
		</view>
		<uni-load-more class="bg-white" v-if="data.lessons.length>0" :status="loadmore" :contentText="contentText"></uni-load-more>
		<view class="cu-modal categorys" :class="modalName=='showtags'?'show':''">
			<view class="modal-bg" @click="modalName=''"></view>
			<view class="cu-dialog">
				<view class="padding-xs bg-white padding-bottom">
					<view class="grid col-4">
						<!-- 热门标签 -->
						<view class="padding-xs" @click="taptags(item.id)" v-for="(item, k) in data.tags" :key="k">
							<view class="padding-xs text-center light" :class="tags.indexOf(item.id)>-1?'bg-red':'bg-grey'">
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar tabbar bg-white border-top">
					<view class="submit" @tap="tags=[]">重置</view>
					<view class="submit bg-gradual-yellow" @tap="loadLesson(1)">a确定</view>
				</view>
			</view>
		</view>
		<view class="cu-modal categorys" :class="modalName=='categorys'?'show':''">
			<view class="modal-bg" @click="modalName=''"></view>
			<view class="cu-dialog">
				<view class="padding-xs bg-white">
					<scroll-view scroll-y scroll-with-animation class="scrolls">
						<view class="grid col-4" v-for="(cate, index) in data.categorys" :key="index">
							<!-- 课程筛选 -->
							<view class="padding-xs">
								<view class="padding-xs text-center light"  :data-id="cate.id" @click="taptibs(cate.id)" :class="categorys.tids.indexOf(cate.id)>-1?'bg-red':'bg-grey'">
									<view class="text-bold text-lg">{{cate.name}}</view>
								</view>
							</view>
							<!-- 基本不显示 -->
							<view class="padding-xs" v-for="(item, k) in cate.subcates" :key="k">
								<view class="padding-xs text-center light" @click="taptibs(item.id)" :class="categorys.tids.indexOf(item.id)>-1?'bg-red':'bg-grey'">
									<view>{{item.title}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="padding-sm text-center" @click="naviTo('lesson/category')">
						<text class="text-blue">查看全部分类>></text>
					</view>
				</view>
				<view class="cu-bar tabbar bg-white border-top">
					<view class="submit" @tap="categorys.tids=[]">重置</view>
					<view class="submit bg-gradual-yellow" @tap="loadLesson(1)">s确定</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import core from "@/static/core.js"
	import lessons from "@/components/util/lessons.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	
	export default {
		components: {lessons, uniLoadMore},
		data() {
			return {
				cateid:0,
				frompage:'',
				platform:'h5',
				scrollTop:0,
				loadmore:'more',
				page:1,
				modalName:'',
				keyword:'',
				searchfocus:false,
				dosearchfocus:false,
				orders:{
					index:0,
					titles:['最新更新','人气优先','好评优先','畅销优先','低价优先','综合排序'],
					name:['default','heats','score','sales','price','auto']
				},
				contentText:{
					"contentdown":"加载更多数据",
					"contentrefresh":"加载中...",
					"contentnomore":"我是有底线的~"
				},
				selector:{
					keyword:'',
					getlessons:1
				},
				selectordefault:{
					keyword:'',
				},
				tags:[],
				categorys:{
					inited:0,
					tids:[],
				},
				shareinfo:{
					url:'',
					providers:4,
					provider:{}
				},
				data:{
					title:"全部课程",
					lessons:[],
					categorys:[],
					total:0,
					tags:[],
					candidate:"输入关键词搜索",
					shareinfo:{
						"title":"",
						"url":"",
						"cover":"",
						"summary":""
					}
				}
			}
		},
		onLoad(options) {
			if(typeof(options.search)!='undefined') this.dosearchfocus = true;
			if(typeof(options.cid)!='undefined' && options.cid){
				this.cateid = options.cid;
				this.categorys.tids.push(parseInt(options.cid));
			}
			if(typeof(options.keyword)!='undefined'){
				this.keyword = options.keyword;
				this.selector.keyword = options.keyword;
			}
			this.frompage = typeof(options.from)=='undefined' ? '' : options.from;
			this.platform = core.platform;
			var that = this;
			let postdata = {cid:this.cateid};
			if(this.categorys.tids.length>0) postdata.cids = this.categorys.tids.join(',');
			if(this.keyword!='') postdata.keyword = this.keyword;
			this.initData('lesson',postdata,function(res){
				that.loadmore = res.lessons.length < 15 ? 'noMore' : 'more';
				//that.keyword = res.candidate;
				that.shareinfo = core.initshare(res.shareinfo.title,res.shareinfo.url,res.shareinfo.cover,res.shareinfo.summary);
			});
		},
		onPullDownRefresh(){
			this.loadLesson(1);
			uni.stopPullDownRefresh();
		},
		onReachBottom(){
			if(this.loadmore=='noMore') return false;
			this.loadLesson(this.page+1);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			async tabSelect(e) {
				if(e==0){
					var tid=e;
				}else{
					var tid = e.currentTarget.dataset.id;
				}
				this.tabCur = tid;
				 this.data.lessons = [];
				 var that = this;
				  var postdata = {page:1,getlessons:1}
				that.data.lessons = Object.values((await this.$api.reqGet({url:"/menu/courseInfo/"+tid})).data);
			},
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res);
					}
					// that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
				this.infoList();
				this.tabSelect(0);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			doback(){
				return core.back();
			},
			doscan(){
				return core.scan();
			},
			dogotop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:100
				})
			},
			searchSubmit(){
				let keyword = this.keyword;
				if(keyword=="" && this.data.candidate!="输入关键词搜索"){
					//if(this.data.candidate=="输入关键词搜索") return core.toast("请输入要搜索的内容");
					keyword = this.data.candidate;
				}
				this.selector.keyword = keyword;
				return this.loadLesson(1);
			},
			/**
			 * @param {Object} e获取热门标签信息
			 */
			pickerOrders(e){
				this.orders.index = e.detail.value;
				this.loadLesson(1);
			},
			/**
			 * @param {Object} tid判断你选中几个筛选
			 */
			taptibs(tid){
				// this.categorys.tids=[];
				if(this.categorys.tids.indexOf(tid)>-1){
					this.categorys.tids.splice(this.categorys.tids.indexOf(tid),1);
					if(this.categorys.tids.length==0) this.selector.cid = 0;
				}else{
					this.categorys.tids.push(tid);
				}
				
			},
			/**
			 * @param {Object} tag获取热门分类数据
			 */
			taptags(tag){
				if(this.tags.indexOf(tag)>-1){
					this.tags.splice(this.tags.indexOf(tag), 1);
				}else{
					this.tags.push(tag);
				}
			},
			/**
			 * 获取分类筛选数据
			 */
			showCates(){
				if(this.categorys.inited==0){
					this.categorys.inited = 1;
					var that = this;
					
					// return core.get('lesson/cate',function(res){
					// 	if(typeof(res.categorys)=='undefined') return that.categorys.inited = 0,core.report(res);
					// 	that.categorys.inited = 2;
					// 	that.data.categorys = res.categorys;
					// 	that.modalName = 'categorys';
					// },{},'json',true);
				}
				this.modalName='categorys';
			},
			async infoList(){
				var that=this;
				that.data.tags=(await this.$api.reqGet({
					url:"menu/selCourseType/0",
				})).data;
				that.data.categorys=(await this.$api.reqGet({
					url:"menu/selFiltrate",
				})).data;
				console.log(that.data.categorys)
			},
			
			
			/**
			 * 分类筛选和热门标签
			 */
			async loadLesson(page=1){
				let data = this.selector;
				if(this.categorys.tids.length>0){
					data.cids = this.categorys.tids.join(',');
				}else{
					data.cids = '';
				}
				data.tags = this.tags.length>0 ? this.tags.join(',') : '';
				if(this.orders.index>0){
					data.order = this.orders.name[this.orders.index];
				}
				data.page = page;
				this.modalName = '';
				var that = this;
				that.data.lessons= (await this.$api.reqPost({
					url:"menu/selCourseByType",
					data:{list:this.tags,keyword:data.keyword,order:data.order,filtrate:that.categorys.tids,page:1,size:10},
				})).data;
				if(that.data.lessons==null){
					that.data.lessons=[];
				}
				// return core.get('lesson',function(res){
				// 	if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
				// 		return core.report(res);
				// 	}
				// 	that.page = page;
				// 	if(page==1){
				// 		that.data.lessons = res.lessons;
				// 	}else{
				// 		that.data.lessons = that.data.lessons.concat(res.lessons);
				// 	}
				// 	that.loadmore = res.lessons.length<15 ? 'noMore' : 'more';
				// },data);
			}
		}
	}
</script>

<style>
	page{background: #FFFFFF;}
	.categorys .scrolls{max-height: 100vw;}
	.gototop{position: fixed; right: 30upx; bottom: 150upx; width: 60upx; height: 60upx; border-radius: 50%; text-align: center; line-height: 60upx; color: #FFFFFF;}
	.loadmore .png{width: 1.4rem; height: 1rem;}
	.cu-bar.search{position: fixed; z-index: 800; top: 0; left: 0; width: 100%;}
	.container{padding-top: calc(100upx + var(--status-bar-height));}
	.status_bar{background: #FFFFFF; position: fixed; top: 0; left: 0; z-index: 100;}
	.container.wp-h5{padding-top: 100upx;}
	.cu-modal.categorys{top: 262upx;}
	.cu-bar.search{top:var(--status-bar-height);}
	.wp-h5 .cu-modal.categorys{top: calc(208upx - var(--status-bar-height));}
	.wp-h5 .cu-bar.search{top: 0;}
	.wp-wxapp .cu-bar.search{padding-right: 200upx;}
</style>
